<template>
    <div class="carousel">
        <el-carousel :interval="4000" type="card" height="350px">
            <el-carousel-item v-for="item in 6" :key="item" style="border-radius: 4px;">
                <h3 text="2xl" justify="center"></h3>
            </el-carousel-item>
        </el-carousel>
    </div>
    <el-divider content-position="left">
        <h2>推荐</h2>
    </el-divider>
    <a class="more" href="/classification">&gt;更多</a>
    <!-- 随机推荐 -->
    <el-col :span="24" class="comic_recommend">
        <el-scrollbar>
            <ul class="scrollbar-flex-content">
                <li v-for="item in 16" :key="item" class="scrollbar-demo-item">
                    <ComicCard />
                </li>
            </ul>
        </el-scrollbar>
        <!-- 点击按钮刷新随即推荐 -->
        <div class="comic_recommend_refreshs">
            <el-button class="vertical-button">
                <el-icon size="18" style="margin: 0 auto 5px auto;">
                    <Refresh />
                </el-icon>
                <span style="margin: 5px auto 0 auto;">刷 新</span>
            </el-button>
        </div>
    </el-col>
    <el-divider content-position="left">
        <h2>最近更新</h2>
    </el-divider>
    <el-col :span="24" class="comic-update">
        <el-scrollbar>
            <ul class="scrollbar-flex-content">
                <li v-for="item in 16" :key="item" class="scrollbar-demo-item">
                    <ComicCard />
                </li>
            </ul>
        </el-scrollbar>
    </el-col>
    <el-divider content-position="left">
        <h2>经典</h2>
    </el-divider>
    <el-row :span="24" class="scriptures">
        <el-col :span="24" class="glasses-list">
            <div v-for="list in 12" :key="list" class="scriptures-glasses"></div>
        </el-col>
        <el-col :span="24" class="glasses-img">
            <img class="scriptures-img" v-for="list in 12" :key="list" src="../../assets/img/2023052311.jpeg" alt="">
        </el-col>
    </el-row>
</template>

<script setup>
import { Refresh } from '@element-plus/icons-vue'
import ComicCard from '@/components/Card/comic/index.vue'
</script>

<style scoped>
/* 分割线 */
.carousel {
    float: left;
    width: 100%;
    height: 400px;
}

/* 走马灯 */
.Carousel {
    float: left;
}

/* 推荐板块 */
/* 切换到分类页面 */
.more {
    float: right;
    cursor: pointer;
    color: #cdddcc;
}

.more:hover {
    text-decoration: underline;
}

/* 滚动条 */
.scrollbar-flex-content {
    display: flex;
}

.comic_recommend {
    float: left;
    margin: 20px 0;
    width: 100%;
    height: 390px;
    background-color: #f1f1f1;
    border-radius: 4px;
}

/* 列表 */
.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 360px;
    margin: 10px;
    border-radius: 4px;
}

/* 刷新按钮 */
.comic_recommend_refreshs {
    z-index: 100;
    position: relative;
    float: right;
    bottom: 390px;
    left: 70px;
}

.vertical-button {
    /* 文字垂直排列 */
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    width: 40px;
    height: 100px;
}

.comic-update {
    float: left;
    margin: 20px 0;
    width: 100%;
    height: 390px;
    background-color: #f1f1f1;
    border-radius: 4px;
}

.scriptures {
    float: left;
    margin: 20px 0;
    width: 100%;
    height: 500px;

}

.glasses-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    z-index: 10;
}

.glasses-img {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    bottom: 420px;
}

.scriptures-glasses {
    width: 75px;
    height: 420px;
    background-color: #e9e9e980;
    backdrop-filter: blur(0.7px);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.746);
}

.scriptures-glasses:nth-child(2n) {
    position: relative;
    top: 60px;
}

.scriptures-glasses:hover {
    opacity: 0;
}

.scriptures-img {
    width: 75px;
    height: 420px;
    border-radius: 4px;
    box-shadow: 1px 1px 6px #515151;
}

.scriptures-img:nth-child(2n) {
    position: relative;
    top: 60px;
}

/* 分类 */
.classification {
    float: left;
    width: 100%;
    height: 500px;
}
</style>